<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

</head>
<body class="">



              <section class="hbox stretch" id="ajaxContent" th:fragment="profile" >
                  <script src="/js/video-fei.js"></script>
                  <script th:inline="javascript">
                      function aaa() {
                          $.ajax({
                              url: '/user/ajax/singerFansUpdate?singer_id='+[[${singerBean.id}]],
                              type: 'POST',
                              success: function () {
                                  var attention = $("#attentionSinger").text();
                                  var fans = $("#fans").text();
                                  if(attention.trim()=='关注'){
                                      $("#attentionSinger").text('取消关注');
                                      fans = fans*1 + 1;
                                  }else{
                                      $("#attentionSinger").text("关注");
                                      fans = fans*1 - 1;
                                  }
                                  $("#fans").text(fans);
                              }
                          });
                          // ajaxRequest('/user/ajax/singerFansUpdate?singer_id='+[[${singerBean.id}]]);
                      }


                  </script>
                <aside class="aside-lg bg-light lter b-r">
                  <section class="vbox" >
                    <section class="scrollable" >
                      <div class="wrapper">
                        <div class="text-center m-b m-t">
                          <a href="#" class="thumb-lg">
                            <img th:src="@{${singerBean.head_img}}" class="img-circle">
                          </a>
                          <div>
                            <div class="h3 m-t-xs m-b-xs">[[${singerBean.name}]]</div>
                          </div>
                        </div>
                        <div class="panel wrapper">
                          <div class="row text-center">
                            <div class="col-xs-12">
                              <a href="#">
                                <span class="m-b-xs h4 block" id="fans">[[${singerBean.fans}]]</span>
                                <small class="text-muted">粉丝数</small>
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="btn-group btn-group-justified m-b">
                          <a id="attentionSinger" th:onclick="aaa()" class="btn btn-success btn-rounded" >
<!--                             data-toggle="button">-->
                            <span class="text" th:text="${attentionBeanFlag}==true?'取消关注':'关注'">
                                点击关注点击取消
                            </span>

                          </a>

                        </div>
                        <div>
                          <small class="text-uc text-xs text-muted">主要成就</small>
                          <p>[[${singerBean.ant}]]</p>
                          <div class="line"></div>
                        </div>
                      </div>
                    </section>
                  </section>
                </aside>
                <aside class="bg-white">
                  <section class="vbox">
                    <header class="header bg-light lt">
                      <ul class="nav nav-tabs nav-white">
                        <li class="active"><a href="#activity" data-toggle="tab">歌曲作品</a></li>
                          <li class=""><a href="#events" data-toggle="tab">视频作品</a></li>
                      </ul>

                    </header>
                    <section class="scrollable">
                      <div class="tab-content">
                        <div class="tab-pane active" id="activity">
                          <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                            <li class="list-group-item" th:each="musicBean:${musicBeanList}">
<!--                              <a href="#" class="thumb-sm pull-left m-r-sm">-->
<!--                                <img src="images/a0.png" class="img-circle">-->
<!--                              </a>-->
                              <a href="#" class="m-r-sm pull-left audio">
                                <audio th:src="@{${musicBean.music_path}}" ></audio>
                                <i class="icon-control-play text"></i>
                              </a>
                              <a href="#" class="clear">
                                <small class="pull-right">[[${#strings.substring(musicBean.release_time,0,10)}]]</small>
<!--                                <strong class="block"></strong>-->
                                <small>[[${musicBean.song_title}]]</small>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="tab-pane" id="events">

                            <ul>
                                <li class="list-group-item clear" th:each="videoBean:${videoBeanList}">
                                    <video th:src="@{${videoBean.video_path}}" class="VideoHeight pull-left videoFei" controls="controls"></video>
                                    <small class="pull-right" >[[${videoBean.video_name}]]</small>
                                </li>
                            </ul>
<!--                                    <a href="#" class="clear">-->

<!--                                    </a>-->

                        </div>
                        <div class="tab-pane" id="interaction">
                          <div class="text-center wrapper">
                            <i class="fa fa-spinner fa fa-spin fa fa-large"></i>
                          </div>
                        </div>
                      </div>
                    </section>
                  </section>
                </aside>
                <aside class="col-lg-2 b-l">
<!--                           给侧边栏留白-->
                </aside>

              </section>




</body>

</html>